<template>
  <div class="play-big-box">
    <div class="playbg" v-show="show" @click.stop="hidesongslist">
    </div>
    <div :class="['music-list',{'show':show}]">
        <!-- 头部 -->
        <div class="topbox">
          <div class="now-play">
            <span>当前播放</span>
            <span>({{listsLength}})</span>
          </div>
          <div class="icon-box">
            <div class="eleiconbox">
              <div class="one" v-show="mode">1</div>
              <i class="iconfont icon-xunhuan"></i>
            </div>
            <div class="mode-box">{{playMode}}</div>
            <div class="eleiconbox">
              <i class="iconfont icon-xiazai1"></i>
            </div>
            <div class="eleiconbox">
              <div class="add">+</div>
              <i class="iconfont icon-shoucangjia"></i>
            </div>
            <div class="eleiconbox">
              <i class="iconfont icon-lajitong"></i>
            </div>
          </div>
        </div>
        <!-- 列表 -->
        <div class="play-list">
          <div class="contentbox" v-for="(ele,index) in prop" :key="index" @click.stop="changeplay(index)">
            <div class="playing" v-show="index==currentsong">
              <i class="iconfont icon-ziyuanldpi"></i>
            </div>
            <div class="songdetail van-ellipsis">
              <div class="name van-ellipsis" v-if="ele">{{ele.name}}</div>
              <div>-</div>
              <div class="singer">{{ele.singername}}</div>
            </div>

            <div class="closebox" @click.stop="del(index)">×</div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["prop", "mode", "currentsong", "show"],
  data() {
    return {};
  },
  methods: {
    hidesongslist() {
      this.$emit("hidesongslistson");
    },
    //删除
    del(index) {
      this.prop.splice(index, 1);
    },
    //点击播放列表中歌曲
    changeplay(index) {
      this.$emit("changeplayson", index);
    },
  },
  computed: {
    listsLength() {
      return this.prop.length;
    },
    playMode() {
      return this.mode ? "单曲循环" : "列表循环";
    },
  },
};
</script>

<style lang = "less">
.playbg {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.music-list {
  transition: all 0.2s ease-in-out;
  overflow-y: scroll;
  width: 92%;
  height: 60%;
  border-radius: 16px;
  background-color: rgba(20, 20, 20, 0.85);
  position: fixed;
  bottom: -510px;
  z-index: 1000;
  margin: auto;
  left: 0;
  right: 0;
  &.show {
    bottom: 20px;
  }
  .topbox {
    padding: 10px 17px 0px 17px;
    .now-play {
      height: 37px;
      line-height: 37px;
      color: white;
      font-size: 17px;
      letter-spacing: 1px;
      span {
        &:nth-child(2) {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.5);
          margin-left: 3px;
          letter-spacing: 0;
        }
      }
    }
    .icon-box {
      display: flex;
      align-items: center;
      .mode-box {
        letter-spacing: 1px;
        flex: 1;
        color: white;
        font-size: 14px;
      }
      .eleiconbox {
        color: rgba(255, 255, 255, 0.5);
        flex: 0 0 22px;
        position: relative;
        margin-right: 27px;
        &:last-child {
          margin-right: 0;
        }
        &:nth-child(1) {
          margin-right: 8px;
        }
        i {
          font-size: 22px;
        }
        .one,
        .add {
          user-select: none;
          position: absolute;
          margin: auto;
          top: 0;
          bottom: 0;
          left: 4px;
          right: 0;
          font-size: 12px;
          width: 12px;
          height: 12px;
          transform: scale(0.7);
        }
      }
    }
  }
}
.play-list {
  overflow: hidden;
  padding: 0 17px;
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.5);
  .contentbox {
    margin-top: 24px;
    height: 25px;
    align-items: center;
    font-size: 12px;
    display: flex;
    &:last-child {
      margin-bottom: 24px;
    }
    .playing {
      margin-right: 9px;
      i {
        color: white;
        font-size: 11px;
      }
    }
    .songdetail {
      flex: 1;
      display: flex;
      align-items: center;
      margin-right: 22px;
      .name {
        letter-spacing: 1px;
        color: white;
        font-size: 15px;
        margin-right: 4px;
      }
      .singer {
        margin-left: 4px;
      }
    }

    .closebox {
      font-size: 28px;
    }
  }
}
</style>